<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            /*下划线*/
            text-decoration: underline;
            color: aquamarine;
            background-color: navy
        }

        .pre {
            /*游标，光标*/
            cursor: not-allowed;
            color: grey;
        }
    </style>
</head>

<body>
    以下是分页
    <br>
    <button onclick="myFunctiondown()" id="btndown">&lt;</button>
    <!--小于，下面是大于-->
    <button onclick="myFunction1()" id="btn1">1</button>
    <button onclick="myFunction2()" id="btn2">2</button>
    <button onclick="myFunction3()" id="btn3">3</button>
    <button onclick="myFunction4()" id="btn4">4</button>
    <button onclick="myFunction5()" id="btn5">5</button>
    <button onclick="myFunctionup()" id="btnup">&gt;</button>
    <br>
    <hr>

    <div id="app">
        <div>当前是第{{currentPage}}页</div>
        <button v-on:click="change('-')" id="=btndown2">上一页</button>
        <button v-for="num in 5" v-on:click="changePage(num)"
            v-bind:class="{active:num == currentPage}">{{num}}</button>
        <button v-on:click="change('+')" id="btnup2">下一页</button>
    </div>

    <script>
        function myFunctiondown() {

        }
        function myFunction1() {
            document.getElementById("btn1").classList.add("active");
            document.getElementById("btn2").classList.remove("active");
            document.getElementById("btn3").classList.remove("active");
            document.getElementById("btn4").classList.remove("active");
            document.getElementById("btn5").classList.remove("active");
            document.getElementById("btndown").classList.add("pre");
            document.getElementById("btnup").classList.remove("pre");
        }
        function myFunction2() {
            document.getElementById("btn2").classList.add("active");
            document.getElementById("btn1").classList.remove("active");
            document.getElementById("btn3").classList.remove("active");
            document.getElementById("btn4").classList.remove("active");
            document.getElementById("btn5").classList.remove("active");
            document.getElementById("btnup").classList.remove("pre");
            document.getElementById("btndown").classList.remove("pre");
        }
        function myFunction3() {
            document.getElementById("btn3").classList.add("active");
            document.getElementById("btn1").classList.remove("active");
            document.getElementById("btn2").classList.remove("active");
            document.getElementById("btn4").classList.remove("active");
            document.getElementById("btn5").classList.remove("active");
            document.getElementById("btnup").classList.remove("pre");
            document.getElementById("btndown").classList.remove("pre");
        }
        function myFunction4() {
            document.getElementById("btn4").classList.add("active");
            document.getElementById("btn1").classList.remove("active");
            document.getElementById("btn2").classList.remove("active");
            document.getElementById("btn3").classList.remove("active");
            document.getElementById("btn5").classList.remove("active");
            document.getElementById("btnup").classList.remove("pre");
            document.getElementById("btndown").classList.remove("pre");
        }
        function myFunction5() {
            document.getElementById("btn5").classList.add("active");
            document.getElementById("btn1").classList.remove("active");
            document.getElementById("btn2").classList.remove("active");
            document.getElementById("btn3").classList.remove("active");
            document.getElementById("btn4").classList.remove("active");
            document.getElementById("btnup").classList.add("pre");
            document.getElementById("btndown").classList.remove("pre");
        }
        function myFunctionup() {

        }
    </script>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                currentPage: 1
            },
            methods: {
                changePage(num) {
                    this.currentPage = num;
                },
                change(flag) {
                    if (flag == '+')
                        this.currentPage++;
                    if (flag == '-')
                        this.currentPage--;
                    if (this.currentPage == 5) {
                        document.getElementById("btndown2").classList.add("pre");
                        document.getElementById("btnup2").classList.remove("pre");
                    }

                }

            }
        });
    </script>
</body>

</html>